'use client'

import { useEffect } from 'react'
import { usePathname, useRouter } from 'next/navigation'
import AppShell from '@/components/app-shell'
import { createContext, useContext, useState } from 'react'
import { Suspense } from 'react'
import { authService } from '@/service/auth';


// 定义用户类型
interface User {
  id: string;
  username: string;
  password: string;
  avatar?: string;
  bio?: string;
  isActive?: boolean;
  createdAt?: Date;
  updatedAt?: Date;
  role?: number;
}

// 定义认证上下文类型
interface AuthContextType {
  isAuthenticated: boolean;
  user: User | null;
  loading: boolean;
  login: (token: string, user: User) => void;
  logout: () => void;
}

// 创建认证上下文
const AuthContext = createContext<AuthContextType | undefined>(undefined);

// 认证提供者组件
function AuthProvider({ children }: { children: React.ReactNode }) {
  // 初始状态设为未认证，loading 为 true
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const router = useRouter();
  const pathname = usePathname();

  // 只在客户端检查登录状态，避免 hydration 错误
  useEffect(() => {
    // 确保在客户端运行
    const checkAuth = async () => {
      try {
        // 使用认证服务检查是否已认证
        const isAuth = authService.isAuthenticated();
        console.log('isAuth:', isAuth);
        if (isAuth) {
          // 获取用户信息（先尝试从本地存储获取）
          const userData = await authService.getCurrentUser();
          console.log(' 获取用户信息 userData:', userData);
          if (userData) {
            setIsAuthenticated(true);
            setUser(userData as User);
          } else {
            // 如果无法获取用户信息，清除认证状态
            await authService.logout();
            setIsAuthenticated(false);
            setUser(null);
          }
        } else {
          setIsAuthenticated(false);
          setUser(null);
        }
      } catch (error) {
        console.error('检查认证状态失败:', error);
        // 如果出现任何错误，确保设置为未认证状态
        setIsAuthenticated(false);
        setUser(null);
      } finally {
        // 无论如何都要设置 loading 为 false
        setLoading(false);
      }
    };

    checkAuth();
  }, []);


  
  // 路由保护逻辑 - 只在客户端执行，避免 hydration 错误
  useEffect(() => {
    // 确保在客户端环境中运行，且跳过加载状态
    if (typeof window === 'undefined' || loading) return;
    
    // 定义不需要认证的路由
    const publicRoutes = ['/login'];
    
    // 检查当前路由是否需要认证
    if (!publicRoutes.includes(pathname) && !isAuthenticated) {
      // 未认证且访问受保护路由，重定向到登录页
      console.log('未认证，重定向到登录页');
      router.replace('/login');
    } else if (publicRoutes.includes(pathname) && isAuthenticated) {
      // 已认证且访问登录页，重定向到首页
      console.log('已认证，重定向到首页');
      router.replace('/');
    }
  }, [isAuthenticated, loading, pathname, router]);

  // 登录方法 - 委托给认证服务处理
  const login = (token: string, userData: User) => {
    // 直接使用认证服务保存认证数据
    authService.setAuthData(token, userData, true);
    
    // 更新状态
    setIsAuthenticated(true);
    setUser(userData);
  };

  // 登出方法 - 委托给认证服务处理
  const logout = async () => {
    try {
      // 调用认证服务的登出方法
      await authService.logout();
    } finally {
      // 确保更新状态并跳转
      setIsAuthenticated(false);
      setUser(null);
      router.replace('/login');
    }
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook用于访问认证上下文  只能在客户端组件中使用
export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// 布局内容组件，根据登录状态和路径决定显示方式
function ContentRenderer({ children, modal }: { children: React.ReactNode, modal: React.ReactNode }) {
  const { isAuthenticated, loading, user, logout } = useAuth()
  const pathname = usePathname()
  
  // 初始状态：服务端渲染时显示空内容
  const [isClient, setIsClient] = useState(false)
  
  // 只在客户端设置 isClient 为 true
  useEffect(() => {
    setIsClient(true)
  }, [])
  
  // 登录页面不需要显示导航栏和侧边栏
  const isLoginPage = pathname === '/login'
  
  // 如果正在加载或不在客户端，显示空内容
  if (loading || !isClient) {
    return null
  }
  
  // 登录页面直接渲染内容，不显示导航栏和侧边栏
  if (isLoginPage) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-100" suppressHydrationWarning>
        {children}
      </div>
    )
  }
  
  // 其他页面显示完整的应用外壳，并传递用户信息和退出功能
  return (
    <AppShell user={user} onLogout={logout}>
      {children}
      {modal}
    </AppShell>
  )
}

// 主布局内容组件
export default function LayoutContent({ children, modal }: { children: React.ReactNode, modal: React.ReactNode }) {
  return (
    <AuthProvider>
      <Suspense fallback={null}>
        <ContentRenderer children={children} modal={modal} />
      </Suspense>
    </AuthProvider>
  )
}